<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>影视剧留言板</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="comments">
      <!-- 评论内容 -->
      <h3 class="comm-head">评论</h3>
      <div class="comm-input">
        <textarea placeholder="爱发评论的人，运气都很棒" maxlength="100">
        </textarea>
        <div class="foot">
          <div class="word">0/100</div>
          <div class="btn">发表评论</div>
        </div>
      </div>
      <!-- 头部 -->
      <h3 class="comm-head">
        热门评论<sub>(5)</sub>
        <span class="active">默认</span>
        <span>时间</span>
      </h3>

      <!-- 评论列表 -->
      <ul class="comm-list"></ul>
      <div class="page">
        <span class="prev">上一页</span>
        <span class="next">下一页</span>
      </div>
    </div>
    <script src="../lib/axios.js"></script>
    <script src="../lib/jquery.js"></script>
    <script src="../lib/template-web.js"></script>
    <script src="./note.js"></script>
    <script type="text/html" id="note">
      {{each list}}
      <!-- 隐藏域，保存 Id 的值 -->
      <input type="hidden" id="{{$value.id}}" user_id="{{$value.user_id}}" />
      <li class="comm-item">
        <div
          class="avatar"
          style="
            background-image: url('https://static.youku.com/lvip/img/avatar/310/6.png');
          "
        ></div>
        <div class="info">
          <p class="name vip">{{$value.username}}</p>
          <p class="time">
            <span> {{$value.time}}</span>
            <span class="iconfont icon-collect"></span>
            <span class="iconfont icon-collect-sel"></span>
            <span class="del" data-id="{{$value.id}}" style="display: none"
              >删除</span
            >
          </p>
          <p>{{$value.content}}</p>
        </div>
      </li>
      {{/each}}
    </script>
  </body>
</html>
